<template>
  <div class="page-monitor-messages">
    <el-card>
      <el-row class="page-monitor-messages-search">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="监控类别">
            <el-select v-model="formInline.monitorType" placeholder="全部" clearable @change="getMonitorData">
              <el-option v-for="item in monitorTypeList" :key="item.label" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="状态">-->
          <!--            <el-select v-model="formInline.operateType" placeholder="全部" clearable @change="getMonitorData">-->
          <!--              <el-option v-for="item in processingStatus" :key="item.label" :label="item.label" :value="item.value" />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item label="用户姓名">
            <el-input v-model="formInline.userName" placeholder="请输入关键字" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="formInline.sex" placeholder="性别" clearable @change="getMonitorData">
              <el-option v-for="item in sexs" :key="item.label" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="当前阶段">
            <el-select v-model="formInline.abbreviation" placeholder="全部" clearable @change="getMonitorData">
              <el-option v-for="item in currentStage" :key="item.label" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="submitForm(formInline)">查找
            </el-button>
            <el-button @click="resetForm(formInline)">清空</el-button>
            <el-button icon="el-icon-download" :loading="allDownloading" @click="clickOnExport">
              导出全部
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <!--      <el-row class="page-monitor-messages-handle">-->
      <!--        <el-button :disabled="isChoosen" type="warning" @click="operateUser">处理</el-button>-->
      <!--      </el-row>-->

      <el-row>
        <el-table
          v-loading="loading"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          height="50vh"
          max-height="60vh"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="监控类型" prop="monitorType" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.monitorType === '0'">初筛异常</span>
              <span v-if="scope.row.monitorType === '1'">周测异常</span>
            </template>
          </el-table-column>
          <el-table-column label="监控说明" prop="monitorDec" width="120" />
          <el-table-column label="生成时间" prop="createTime" />
          <!--          <el-table-column-->
          <!--            label="处理状态"-->
          <!--            prop="ProcessingStatus"-->
          <!--            width="200"-->
          <!--          />-->
          <!--          <el-table-column label="处理人" prop="operatorName" width="100" />-->
          <el-table-column label="用户姓名" prop="nickName" />
          <el-table-column label="电话" prop="phone" width="120" />
          <el-table-column label="性别" prop="sex" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.sex === '1'">男</span>
              <span v-else>女</span>
            </template>
          </el-table-column>
          >
          <el-table-column label="组别" prop="groupName" width="100" />
          <el-table-column label="教练姓名" prop="coachName" width="100" />
          <el-table-column label="当前阶段" prop="abbreviation" width="100" />
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button
                plain
                size="small"
                type="primary"
                icon="el-icon-s-order"
                @click="handleEdit(scope.$index, scope.row)"
              >查看档案
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-row class="page-monitor-messages-pagination">
        <el-col>
          <el-button
            v-if="currentChoose && currentChoose.length > 0"
            icon="el-icon-download"
            :loading="downloading"
            @click="clickOnExportSelection()"
          >导出选中数据</el-button>
        </el-col>
        <el-col>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="currentPage"
            :background="false"
            :limit.sync="pageSize"
            @pagination="getMonitorData"
          />
        </el-col>
      </el-row>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" title="自杀风险处理确认" width="30%">
      <span>当前风险事件已处理完毕</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">处理完毕</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  ExportMonitorMessages,
  GetUserMonitorList,
  operateUserMonitor
} from '@/api/api'
import { Message } from 'element-ui'

import Pagination from '@/components/Pagination'

const monitorTypeList = [
  {
    label: '初筛异常',
    value: '0'
  },
  {
    label: '周测异常',
    value: '1'
  }
]
const processingStatus = [
  {
    label: '已处理',
    value: '1'
  },
  {
    label: '未处理',
    value: '0'
  }
]
const currentStage = [
  // {
  //   label: '未开始',
  //   value: '未开始'
  // },
  {
    label: '初评',
    value: 'S0'
  },
  {
    label: 'S1',
    value: 'S1'
  },
  {
    label: 'S2',
    value: 'S2'
  },
  {
    label: 'S3',
    value: 'S3'
  },
  {
    label: 'S4',
    value: 'S4'
  },
  {
    label: 'S5',
    value: 'S5'
  },
  {
    label: 'S6',
    value: 'S6'
  },
  {
    label: 'S7',
    value: 'S7'
  },
  {
    label: 'END',
    value: 'END'
  }
]
const sexs = [
  {
    label: '全部',
    value: -1
  },
  {
    label: '男',
    value: 1
  },
  {
    label: '女',
    value: 2
  }
]

export default {
  name: 'MonitorMessages',
  components: { Pagination },
  data() {
    return {
      loading: false,
      downloading: false,
      allDownloading: false,

      tableData: [],
      formInline: {
        monitorType: '',
        // operateType: '',
        userName: '',
        sex: '',
        abbreviation: ''
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      monitorTypeList: monitorTypeList,
      processingStatus: processingStatus,
      currentStage: currentStage,
      sexs: sexs,
      dialogVisible: false,
      currentChoose: []
    }
  },
  computed: {
    isChoosen() {
      return this.currentChoose.length === 0
    }
  },
  mounted() {
    this.getMonitorData(this.formInline)
  },
  methods: {
    // 监控消息处理
    async operateUser() {
      const id = this.currentChoose[0]?.id
      const { status, data } = await operateUserMonitor(id)
      if (status === 200) {
        Message.success('当前风险事件已处理完毕')
      } else {
        Message.error(data.msg)
      }
    },
    // 获取监控列表
    async getMonitorData() {
      // params = params || this.formInline
      const params = {
        ...this.formInline,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        sex: this.formInline.sex === -1 ? '' : this.formInline.sex >= 0 ? this.formInline.sex : undefined
      }
      try {
        if (this.loading) {
          return
        }
        this.loading = true
        const { data } = await GetUserMonitorList(params)

        const { code, msg, rows, total } = data

        this.loading = false
        if (code !== 200) {
          this.$message.error(msg)
          return
        }
        this.total = total
        this.tableData = rows
      } catch (e) {
        console.error(e)
        this.loading = false
      }
    },
    onSubmit(formEl) {
      if (!formEl) return
    },
    async submitForm(formEl) {
      if (!formEl) return

      const params = {
        ...formEl
      }
      params.sex = formEl.sex === -1 ? '' : formEl.sex

      const { data } = await GetUserMonitorList({
        ...params
      })
      if (data.code !== 200) {
        this.$message.error(data.msg)
        return
      }
      this.tableData = data.rows
    },
    resetForm() {
      this.formInline = {
        monitorType: '',
        // operateType: '',
        userName: '',
        abbreviation: ''
      }
    },

    clickOnExport() {
      this.requestExportAll()
    },
    clickOnExportSelection() {
      this.requestExportMessage(
        this.currentChoose.map((item) => {
          return item.monitorId
        })
      )
    },
    handleEdit(rowIndex, rowItem) {
      this.$router.push(`/patient-detail/index?id=${rowItem.id}`)
    },
    handleSizeChange() { },
    handleCurrentChange() { },
    handleModal() {
      this.dialogVisible = true
    },
    handleSelectionChange(currentRow) {
      this.currentChoose = currentRow
    },
    async requestExportAll() {
      if (this.allDownloading) {
        return
      }
      this.allDownloading = true
      await ExportMonitorMessages({})
      this.allDownloading = false
    },
    async requestExportMessage(ids) {
      if (this.downloading) {
        return
      }
      this.downloading = true
      // console.log(ids, ids.join(','))
      await ExportMonitorMessages({ ids: ids })
      this.downloading = false
    }
    // async requestExportAll() {
    //   await ExportMonitorMessages({})
    // },
    // async requestExportPartial(ids) {
    //   // console.log(ids, ids.join(','))
    //   await ExportMonitorMessages({ ids: ids })
    // }
  }
}
</script>

<style lang="scss" scoped>
.page-monitor-messages {
  padding: 20px;
  min-height: 80vh;
  background-color: #f9f9f9;

  &-search {}

  &-handle {
    margin: 0 0 30px 0;
  }

  &-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
